<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米有品</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./font_9lxfu93gdn6/iconfont.css">
    <script src="./flexible.js"></script>
</head>

<body>
    <div class="mi">

        <!-- 头部搜索 -->
        <div class="title clearfix">
            <img src="./img/navi_title_v6.png" class="logo">
            <div class="input right">
                <img src="./img/navi_search_v5.png" class="left">
                <input type="text" placeholder="搜一搜" class="left">
            </div>
        </div>

        <!-- 上部图片 -->
        <div class="image_show">
            <a href="#"><img src="./img/滑板车.png" alt=""></a>
        </div>

        <!-- 导航区域 -->
        <div class="nav clearfix">
            <ul>
                <li>
                    <a href="#">
                        <img src="./img/nav1.png" alt="">
                        <p>上新精选</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/nav2.png" alt="">
                        <p>小米众筹</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/nav3.png" alt="">
                        <p>有品秒杀</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/nav4.png" alt="">
                        <p>生活优选</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/nav5.png" alt="">
                        <p>小米自营</p>
                    </a>
                </li>
            </ul>
        </div>

        <!-- 商品导航 -->
        <div class="goods_nav clearfix">
            <ul>
                <li><a href="#"><b>精选好物</b></a></li>
                <li><a href="#">有品定制</a></li>
                <li><a href="#">热销排行</a></li>
                <li><a href="#">畅享清凉</a></li>
            </ul>
        </div>

        <!-- 商品主体 -->
        <div class="godds_body clearfix">
            <div class="public goods1">
                <a href="#">
                    <img src="./img/1.png" alt="" class="main_photo">
                    <p> 质感AI智能手表 </p>
                    <p> 金属外观质感升级，内置AI </p>
                    <p>
                        <span class="one">¥</span>
                        <sapn class="two">299</sapn>
                        <sapn class="one">限时价</sapn>
                        <sapn class="del">¥599</sapn>
                    </p>
                    <p>
                        <img src="./img/新品.png" alt=""><img src="./img/秒杀.png" alt=""><img src="./img/售后.png" alt="">
                    </p>
                </a>
            </div>
            <div class="public goods2">
                <a href="#">
                    <img src="./img/2.png" alt="" class="main_photo">
                    <p>
                        <img src="./img/618.png" alt="">
                        <span> 折叠键盘主机 </span>
                    </p>
                    <p> 小巧，便携，随时随地使用。 </p>
                    <p>
                        <span class="one">¥</span>
                        <span class="two">4299</span>
                        <span class="one">起</span>
                        <span class="one">券后价</span>
                        <span class="del">¥4999</span>
                    </p>
                    <p>
                        <img src="./img/新品.png" alt="">
                    </p>
                </a>
            </div>
            <div class="public goods3">
                <a href="#">
                    <img src="./img/3.png" alt="" class="main_photo">
                    <p>
                        <img src="./img/xiaomi.png" alt="">
                        <img src="./img/618.png" alt="">
                        <span> Xiaomi 15 </span>
                    </p>
                    <p> S Pro </p>
                    <p>
                        <span class="one">¥</span>
                        <span class="two">5499</span>
                        <span class="one">起</span>
                    </p>
                    <p>
                        <img src="./img/新品.png" alt="">
                        <img src="./img/价保.png" alt="">
                    </p>
                </a>
            </div>
            <div class="public goods4">
                <a href="#">
                    <img src="./img/4.png" alt="" class="main_photo">
                    <p>
                        <img src="./img/众筹.png" alt="">
                        <span> 透明冰制冰机 </span>
                    </p>
                    <p> 超大尺寸全透明冰,慢融锁味 </p>
                    <p>
                        <span class="one">¥</span>
                        <span class="two">1499</span>
                        <span class="one">起</span>
                    </p>
                    <p class="clearfix">
                        <span>HOT</span>
                        <img src="./img/售后.png" alt="">
                    </p>
                </a>
            </div>
            <div class="public goods5">
                <a href="#">
                    <img src="./img/5.png" alt="" class="main_photo">
                    <p> 蓝牙4G插卡双通话 </p>
                    <p> 蓝牙+4G插卡双通话AI手表 </p>
                    <p>
                        <span class="one">¥</span>
                        <span class="two">399</span>
                        <span class="one">起</span>
                        <span class="one">限时价</span>
                        <span class="del">¥699</span>
                    </p>
                    <p>
                        <img src="./img/新品.png" alt="">
                        <img src="./img/秒杀.png" alt="">
                        <img src="./img/售后.png" alt="">
                    </p>
                </a>
            </div>
            <div class="public goods6">
                <a href="#">
                    <img src="./img/6.png" alt="" class="main_photo">
                    <p> 轻薄蓝牙通话手表 </p>
                    <p> 一键链接通话|百种运动模式 </p>
                    <p>
                        <span class="one">¥</span>
                        <span class="two">199</span>
                        <span class="one">起</span>
                        <span class="one">限时价</span>
                        <span class="del">¥249</span>
                    </p>
                    <p>
                        <img src="./img/新品.png" alt="">
                        <img src="./img/秒杀.png" alt="">
                        <img src="./img/售后.png" alt="">
                    </p>
                </a>
            </div>
            <div class="public goods7">
                <a href="#">
                    <img src="./img/7.png" alt="" class="main_photo">
                    <p>
                        <img src="./img/生活优选.png" alt="">
                        <span> 一级能效落地扇 </span>
                    </p>
                    <p> 支持米家APP，直流电机 </p>
                    <p>
                        <span class="one">¥</span>
                        <span class="two">189</span>
                        <span class="one">起</span>
                    </p>
                    <p>
                        <img src="./img/新品.png" alt="">
                        <img src="./img/会员折上折.png" alt="">
                        <img src="./img/售后.png" alt="">
                    </p>
                </a>
            </div>
            <div class="public goods8">
                <a href="#">
                    <img src="./img/8.png" alt="" class="main_photo">
                    <p> 质零手持风扇 </p>
                    <p> 手持风扇，小身材大风量 </p>
                    <p>
                        <span class="one">¥</span>
                        <span class="two">19.9</span>
                        <span class="one">起</span>
                        <span class="del">¥29.9</span>
                    </p>
                    <p>
                        <img src="./img/新品.png" alt="">
                    </p>
                </a>
            </div>
            <div class="public goods9">
                <a href="#">
                    <img src="./img/9.png" alt="" class="main_photo">
                    <p>
                        <span> 冰镇超级凉感被 </span>
                    </p>
                    <p> 易清洁透气纤维,清凉安睡 </p>
                    <p>
                        <span class="one">¥</span>
                        <span class="two">119</span>
                        <span class="one">起</span>
                        <span class="one">限时价</span>
                        <span class="del">¥179</span>
                    </p>
                    <p class="clearfix">
                        <span>HOT</span>
                        <img src="./img/秒杀.png" alt="">
                    </p>
                </a>
            </div>
            <div class="public goods10">
                <a href="#">
                    <img src="./img/10.png" alt="" class="main_photo">
                    <p> 和田玉无事牌吊坠 </p>
                    <p> 甄选美玉,典雅气质,平安伴随 </p>
                    <p>
                        <span class="one">¥</span>
                        <span class="two">199</span>
                        <span class="one">起</span>
                        <span class="one">限时价</span>
                        <span class="del">¥399</span>
                    </p>
                    <p>
                        <img src="./img/新品.png" alt="">
                        <img src="./img/会员折上折.png" alt="">
                        <img src="./img/秒杀.png" alt="">
                    </p>
                </a>
            </div>
            <div class="public goods11">
                <a href="#">
                    <img src="./img/11.png" alt="" class="main_photo">
                    <p>
                        <img src="./img/xiaomi.png" alt="">
                        <span> 小米盒子 </span>
                    </p>
                    <p> 4K HDR 影院级体验 </p>
                    <p>
                        <span class="one">¥</span>
                        <span class="two">299</span>
                    </p>
                    <p>
                        <img src="./img/新品.png" alt="">
                        <img src="./img/30天.png" alt="">
                    </p>
                </a>
            </div>
            <div class="public goods12">
                <a href="#">
                    <img src="./img/12.png" alt="" class="main_photo">
                    <p> 微星5080主机 </p>
                    <p> 32G 1TB | 5080 | 360水冷 </p>
                    <p>
                        <span class="one">¥</span>
                        <span class="two">4749</span>
                        <span class="one">起</span>
                        <span class="one">券后价</span>
                        <span class="del">¥5499</span>
                    </p>
                    <p>
                        <img src="./img/新品.png" alt="">
                        <img src="./img/售后.png" alt="">
                    </p>
                </a>
            </div>
        </div>

        <!-- 敬请期待 -->
        <div class="foot">
            <span>更多好物，敬请期待</span>
        </div>

        <!-- 底部导航 -->
        <div class="footer_nav clearfix">
            <div class="public_nav">
                <span class="iconfont icon-shouye-zhihui"></span>
                <p>首页</p>
            </div>
            <div class="public_nav">
                <span class="iconfont icon-fenlei"></span>
                <p>分类</p>
            </div>
            <div class="public_nav">
                <span class="iconfont icon-gouwuche"></span>
                <p>购物车</p>
            </div>
            <div class="public_nav">
                <span class="iconfont icon-wode"></span>
                <p>我的</p>
            </div>
        </div>

        <!-- APP打开 -->
        <div class="fixed_box clearfix">
            <a href="#">
                <div class="image left"><img src="./img/有品.png" alt=""></div>
                <div class="app">APP内打开</div>
            </a>
        </div>
    </div>
</body>

</html>